<template>
	<div class="goodsInf commonMain">
		<div class="coMain">
			<div>
				<div class="coMainIn">
					<div class="coTitle">{{$route.params.id ? '编辑商品' : '新增商品'}}<span class="fcHint">商品图片素材建议去官网或京东、淘宝等各大平台获取以提升视觉效果</span></div>
					<div class="commonForm goodsForm">
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">商品名称<span class="fcHint">最多20字</span></label>
								<div class="fieldContent">
									<input v-model="goodDetail.name" type="text" class="" name="proName" value="" maxlength="20" placeholder="">
								</div>
							</div>
							<div class="bfField inline">
								<label class="">商品标签<span class="fcHint">最多选择3个标签</span></label>
								<div class="fieldContent tabCheck">
									<a href="javascript:;" @click="addTag('a', 1)" :class="[changeTag.a ? 'tabAct' : '']">可分期</a>
									<a href="javascript:;" @click="addTag('b', 2)" :class="[changeTag.b ? 'tabAct' : '']">0首付</a>
									<a href="javascript:;" @click="addTag('c', 3)" :class="[changeTag.c ? 'tabAct' : '']">免息分期</a>
									<a href="javascript:;" @click="addTag('d', 4)" :class="[changeTag.d ? 'tabAct' : '']">携带银行卡+身份证</a>
								</div>
							</div>
						</div>
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">商品图片<span class="fcHint">最多3张图片,建议尺寸750*750</span></label>
								<div class="fieldContent uploadBtn">
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="0"  accept="image/png,image/gif,image/jpeg" @change="uploadImage">
								    	<span v-if="!goodDetail.goodImageList[0] || !goodDetail.goodImageList[0].imgUrl">封面图</span>
								    	<img v-else :src="goodDetail.goodImageList[0].imgUrl" />
									</a>
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="1"  accept="image/png,image/gif,image/jpeg" @change="uploadImage">
								    	<span v-if="!goodDetail.goodImageList[1] || !goodDetail.goodImageList[1].imgUrl">+</span>
								    	<img v-else :src="goodDetail.goodImageList[1].imgUrl" />
									</a>
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="2"  accept="image/png,image/gif,image/jpeg" @change="uploadImage">
								    	<span v-if="!goodDetail.goodImageList[2] || !goodDetail.goodImageList[2].imgUrl">+</span>
								    	<img v-else :src="goodDetail.goodImageList[2].imgUrl" />
									</a>
								</div>
							</div>
							<div class="bfField inline">
								<label class="">商品描述<span class="fcHint">最多输入30个字符</span></label>
								<div class="fieldContent goodsDescribe">
									<textarea v-model="goodDetail.intro" name="proDesscribe" maxlength="30" placeholder="示例：4GB内存/64G/128G/买就送话费"></textarea>
								</div>
							</div>
						</div>
						<div class="bfSection">
							<div class="bfField">
								<label class="">商品规格&售价</label>
								<div class="fieldContent proPrice" v-for="(item, index) in goodDetail.specList">
									<div>
										<label>商品规格</label>
										<div class="priceIn">
											<input v-model="item.specName" type="text" placeholder="例：土豪金/128金" >
										</div>
									</div>
									<div>
										<label>价格</label>
										<div class="priceIn">
											<input v-model="item.price" type="text" name="">元
										</div>
									</div>
									<div>
										<label>分期金额</label>
										<div class="priceIn">
											<input v-model="item.payment" type="text" name="">元/月
										</div>
									</div>
									<div v-if="index > 0" class="deleteIt">
										<a href="javascript:;" @click="deleteSpec(index)">删除</a>
									</div>
								</div>
								<div class="fieldContent">
									<div class="addBtn">
										<button @click="addSpec" type="button" class="">+添加规格</button>
									</div>
								</div>
							</div>
						</div>
						<div class="bfSection">
							<div class="bfField">
								<label class="">商品详情描述<span class="fcHint">最多可上传10张，建议去产品官网、京东等平台获取优质素材</span></label>
								<div class="fieldContent">
									<div class="showDescription">
										<input type="checkbox" id="sOrH" checked>
										<label for="sOrH" class="labelBox"></label>
										<label for="sOrH" class="labelTxt">显示更多商品图文描述</label>
									</div>
									<div class="addImg">
										<a href="javascript:;" class="a-upload">
									    	<input type="file" name="images" id="" @change="uploadGoodImage">
									    	+上传图片
										</a>
										<div class="addDes">
											<div v-if="goodDetail.detailImageList" v-for="(item, index) in goodDetail.detailImageList" class="des-img-layout">
												<img :src="item.imgUrl" />
												<span class="delete-image" @click="deleteGoodImage(index)"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="commBtn">
							<button type="button" class="cancelBtn" @click="$router.back()">取消</button>
							<button type="button" class="holdBtn" @click="saveGoodDetail">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'

export default{
  name: 'goodsdetail',
  data () {
  	return {
  	  changeTag: {
  	  	a: null,
  	  	b: null,
  	  	c: null,
  	  	d: null
  	  },
  	  goodDetail: {
  	  	goodId: 0,
  	  	name: '',
  	  	tag: '',
  	  	intro: '',
  	  	specList: [{specName: '', price: '', payment: ''}],
  	  	goodImageList: [{}, {}, {}],
  	  	detailImageList: []
  	  }
  	}
  },
  methods: {  	
  	splitTags () {
  	  let tags = this.goodDetail.tag.split(',')
  	  for(let index in tags) {
  	    if(tags[index] === '1') {
  	      this.changeTag.a = 1
  	    }
  	    if(tags[index] === '2') {
  	      this.changeTag.b = 1
  	    }
  	    if(tags[index] === '3') {
  	      this.changeTag.c = 1
  	    }
  	    if(tags[index] === '4') {
  	      this.changeTag.d = 1
  	    }
  	  }
  	},
  	addTag (key, value) {
  	  
  	  if (this.changeTag[key]) {
  	  	this.changeTag[key] = null
  	  } else {
  	  	let length = 0
  	    if(this.changeTag.a) {
  	  	  length++
  	    }
  	    if(this.changeTag.b) {
  	  	  length++
  	    }
  	    if(this.changeTag.c) {
  	  	  length++
  	    }
  	    if(this.changeTag.d) {
  	  	  length++
  	    }
  	    if(length >= 3) {
  	      this.$noty.warning('商品标签最多只能选择三个')
  	      return
  	    }
  	  	this.changeTag[key] = value
  	  }
  	  let tag = ''
  	  if(this.changeTag.a) {
  	  	tag += ',1'
  	  }
  	  if(this.changeTag.b) {
  	  	tag += ',2'
  	  }
  	  if(this.changeTag.c) {
  	  	tag += ',3'
  	  }
  	  if(this.changeTag.d) {
  	  	tag += ',4'
  	  }
  	  tag = tag.substr(1)
  	  this.goodDetail.tag = tag
  	},
  	deleteGoodImage (index) {
  	  this.goodDetail.detailImageFlag = 1
  	  this.goodDetail.detailImageList.splice(index, 1)
  	},
  	uploadGoodImage (e) {
  	  if (this.goodDetail.detailImageList && this.goodDetail.detailImageList.length >= 10) {
  	  	this.$noty.warning('商品详情图最多只能上传10张')
  	  	return
  	  }
  	  let file = e.target.files[0]
  	  let params = new FormData()
      if(!file || !file.name) {
      	console.log('用户取消上传')
      	return
      }
  	  params.append('file',file,file.name)
      params.append('chunk','0')
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      fetch.send('/merchant/uploadImg', params, config).then(res => {
      	if (res.respCode === '000000') {
      	  this.goodDetail.detailImageFlag = 1
      	  this.goodDetail.detailImageList.push({
      	  	'imgUrl': res.result.img,
            'preImgUrl': res.result.preImg
      	  })
      	} else {
      	  this.$noty.error(res.respDesc ? res.respDesc : '上传商品详情图片失败')
      	}
      })
  	},
  	uploadImage (e) {
  	  let file = e.target.files[0]
  	  let index = e.target.id
  	  let params = new FormData()
      if(!file || !file.name) {
      	console.log('用户取消上传')
      	return
      }
  	  params.append('file',file,file.name)
      params.append('chunk','0')
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      fetch.send('/merchant/uploadImg', params, config).then(res => {
      	if (res.respCode === '000000') {
      	  let oldValue = this.goodDetail.goodImageList[index]
      	  let value = {
      	  	imgUrl: res.result.img,
      	  	preImgUrl: res.result.preImg,
      	  	imgId: oldValue.imgId ? oldValue.imgId : 0
      	  }
      	  this.$set(this.goodDetail.goodImageList, index, value)
      	} else {
      	  this.$noty.error(res.respDesc ? res.respDesc : '上传商品图片失败')
      	}
      })
  	},
  	deleteSpec (index) {
      this.goodDetail.specFlag = 1
      this.goodDetail.specList.splice(index, 1)
  	},
  	addSpec () {
  	  this.goodDetail.specFlag = 1
  	  this.goodDetail.specList.push({
  	  	specName : '',
        price : 0,
        payment : null
  	  })
  	},
  	checkGoodDetail () {
  	  if (!this.goodDetail.goodImageList || !this.goodDetail.goodImageList[0] || !this.goodDetail.goodImageList[0].imgUrl) {
  	  	this.$noty.warning('必须上传第一张封面图')
  	  	return false
  	  }
  	  for(let item in this.goodDetail.specList) {
  	  	if (!this.goodDetail.specList[item].specName) {
  	  	  this.$noty.warning('请填写商品规格&售价, 第' + (parseInt(item) + 1) + '条的商品规则')
  	  	  return false
  	  	}
  	  	if (!this.goodDetail.specList[item].price) {
  	  	  this.$noty.warning('请填写商品规格&售价, 第' + (parseInt(item) + 1) + '条的价格')
  	  	  return false
  	  	}
  	  	if (isNaN(this.goodDetail.specList[item].price)) {
  	  	  this.$noty.warning('商品规格&售价, 第' + (parseInt(item) + 1) + '条的价格必须为数字')
  	  	  return false
  	  	}
  	  	if (parseFloat(this.goodDetail.specList[item].price) < 0) {
  	  	  this.$noty.warning('商品规格&售价, 第' + (parseInt(item) + 1) + '条的价格不能为负数')
  	  	  return false
  	  	}
  	  	if (this.goodDetail.specList[item].payment && isNaN(this.goodDetail.specList[item].payment)) {
  	  	  this.$noty.warning('商品规格&售价, 第' + (parseInt(item) + 1) + '条的分期金额必须为数字')
  	  	  return false
  	  	}
  	  	if (this.goodDetail.specList[item].payment && parseFloat(this.goodDetail.specList[item].payment) < 0) {
  	  	  this.$noty.warning('商品规格&售价, 第' + (parseInt(item) + 1) + '条的分期金额不能为负数')
  	  	  return false
  	  	}
  	  }
  	  return true
  	},
  	saveGoodDetail () {
  	  if(!this.checkGoodDetail()) {
  	  	return
  	  }
  	  let uri = '/merchant/saveGoodDetail'	
  	  if (this.$route.params.id) {
  	  	uri = '/merchant/updateGoodDetail'
  	  	this.goodDetail.specFlag = 1
  	  }
  	  fetch.send(uri, this.goodDetail).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.$router.back()
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '保存商品失败')
  	  	}
  	  })
  	},
  	getGoodDetail () {
  	  let params = {
  	  	goodId: this.$route.params.id
  	  }
  	  fetch.send('/merchant/getGoodDetail', params).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.goodDetail = res.result
  	  	  if(res.result.tag) {
  	  	  	this.splitTags()
  	  	  }
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取商品详情')
  	  	}
  	  })
  	}
  },
  created () {
  	if(this.$route.params.id) {
  	  this.getGoodDetail()
  	}
  }
}

</script>
<style type="text/css" scoped>
	.commonMain{
		width: 100%;
		float: none;
		overflow: hidden;
		padding: 0;
	}
	.coMain{
		height: 100%;
	}
	.coMain>div{
		background: #fff;
		border-right: 1px solid #F2F2F2;
		height: 100%;
		overflow: auto;
	}
	.coMainIn{
		padding: 50px 30px;
	}
	.coTitle{
		color: #333;
		font-size: 20px;
		letter-spacing: 1px;
		margin-bottom: 30px;
		padding-bottom: 25px;
	}
	.fcHint{
		color: #8f8f8f;
		font-size: 14px;
		vertical-align: bottom;
		margin-left: 5px;
	}
	.fieldContent .fcHint{
		line-height: 1.2;
	}
	.commonForm .fcHint{
		color: #8f8f8f;
		font-size: 12px;
		margin-top: 15px;
	}
	.bfSection{
		min-width: 950px;
		margin-bottom: 30px;
	}
	.bfField{
		margin-bottom: 30px;
		position: relative;
	}
	.bfField.inline{
		display: inline-block;
		margin-bottom: 0;
		margin-right: 15px;
	}
	.commonForm .bfField{
		margin-right: 20px;
	}
	.commonForm .bfField.inline{
		vertical-align: top;
		width: 450px;
	}
	.bfField label{
		color: #333;
		font-weight: 600;
		letter-spacing: 1px;
	}
	.bfField.inline label{
		display: block;
		margin-bottom: 10px;
	}
	.commonForm .bfField label{
		color: #333;
		display: inline-block;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 8px;
	}
	.commonForm .bfField>label{
		display: block;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.fieldContent{
		flex: 1 1 0%;
		line-height: 20px;
		text-align: left;
	}
	.bfField input[type=number], .bfField input[type=password], .bfField input[type=text], .bfField textarea{
		border: 1px solid #dedede;
		border-radius: 4px;
		color: #555;
		line-height: 22px;
		padding: 5px 8px;
		outline: none;
	}
	.commonForm .bfField.inline input[type=text],.commonForm .bfField.inline select{
		box-sizing: border-box;
		width: 100%;
	}
	.commonForm .bfField .tabCheck a{
		float: left;
		padding: 3px 15px;
		line-height: 20px;
		border: 1px solid #dedede;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}
	.commonForm .bfField .tabCheck a.tabAct{
		color: #f54d4e;
		border-color: #f54d4e;
		background: url('images/checked.png') no-repeat top left;
		background-size: 20px 18px;
	}
	.commonForm .bfField .uploadBtn a{
		float: left;
		position: relative;
		overflow: hidden;
		text-align: center;
		width: 130px;
		height: 130px;
		border: 1px dashed #dedede;
		text-align: center;
		line-height: 110px;
		color: #dedede;
		font-size: 140px;
		margin-left: 30px;
		box-sizing: border-box;
	}
	.commonForm .bfField .uploadBtn a:first-child{
		font-size: 20px;
		color: #999;
		border: 1px solid #dedede;
		margin-left: 0;
	}

	.commonForm .bfField .uploadBtn img {
		padding: 5px;
		width: 120px;
		height: 120px;
	}

	.commonForm .bfField .uploadBtn a input{
		width: 130px;
		height: 130px;
		overflow: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.fieldContent textarea,.fieldContent input[type="text"]{
		width: 100%;
		box-sizing: border-box;
		resize: none;
	}
	.commonForm .fieldContent textarea,.commonForm .fieldContent input[name="phone"]{
		width: 450px;
	}
	.commonForm .goodsDescribe textarea{
		height: 130px;
	}
	.commonForm .fieldContent.proPrice{
		overflow: hidden;
		margin-top: 10px;
	}
	.commonForm .fieldContent.proPrice>div{
		width: 270px;
		float: left;
		font-size: 14px;
	}
	.commonForm .fieldContent.proPrice>div.deleteIt{
		width: 100px;
	}
	.commonForm .fieldContent.proPrice>div input{
		width: 198px;
		margin-right: 5px;
	}
	.commonForm .fieldContent.proPrice>div a{
		display: inline-block;
		color: #f54d4e;
		line-height: 30px;
		margin-top: 30px;
	}
	.commonForm .fieldContent>div.addBtn button{
		width: 198px;
		color: #f54d4e;
		font-size: 16px;
		line-height: 34px;
		letter-spacing: 1px;
		border: 1px solid #f54d4e;
		background: #fff;
		border-radius: 5px;
		outline: none;
		margin-top: 20px;
	}
	.commonForm .fieldContent .showDescription{
		position: relative;
	}
	.commonForm .fieldContent .showDescription input[type='checkbox']{
		visibility: hidden;
		width: 20px;
		height: 20px;
	}
	.commonForm .fieldContent .showDescription label.labelTxt{
		display: inline-block;
		font-size: 14px;
		color: #666;
		line-height: 20px;
		vertical-align: top;
		margin: 0;
	}
	.commonForm .fieldContent .showDescription label.labelBox{
		cursor: pointer;
		width: 20px;
		height: 20px;
		background: url('images/checkbox.png') no-repeat 100% 100% #fff;
		position: absolute;
		top: 0;
	    left: 0;
		margin: 0;
	}
	.commonForm .fieldContent .showDescription label.labelBox:after {
	    opacity: 0;
	    content: '';
	    width: 20px;
		height: 20px;
	    position: absolute;
	    background: url('images/checkBoxIn.png') no-repeat transparent;
	    top: 0;
	    left: 0;
	}
	.commonForm .fieldContent .showDescription input[type='checkbox']:checked + label.labelBox:after {
	    opacity: 1;
	}
	.commonForm .fieldContent div.addImg a{
		position: relative;
		display: block;
		width: 198px;
		height: 36px;
		text-align: center;
		color: #f54d4e;
		font-size: 16px;
		line-height: 34px;
		letter-spacing: 1px;
		border: 1px solid #f54d4e;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		margin: 20px 0;
	}
	.commonForm .fieldContent .addImg a input{
		display: block;
		width: 198px;
		height: 36px;
		overflow: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.commonForm .fieldContent .addImg .addDes{
		padding: 5px;
		width: 900px;
		min-height: 130px;
		height: auto;
		border: 1px solid #dedede;
		border-radius: 4px;
	}
	.commonForm .commBtn button{
		width: 198px;
		height: 44px;
		color: #fff;
		border-radius: 4px;
		background: #F54D4F;
		border: none;
		font-size: 18px;
		letter-spacing: 3px;
		line-height: 44px;
		margin-left: 15px;
		position: relative;
		outline: none;
		cursor: pointer;
	}
	.commonForm .commBtn button.cancelBtn{
		border: 1px solid #f54d4e;
		background: #fff;
		color: #f54d4e;
		margin-left: 0;
	}

	.des-img-layout{
		position: relative;
		width: 100%;
		margin-top: 5px;
		padding-bottom: 5px;
	}

	.des-img-layout img{
		display: block;
		border: none;
		font-size: 0;
		max-width: 100%;
		height: auto;
	}

	.delete-image{
		display: block;
		position: absolute;
		right:0;
		top: 0;
		height: 20px;
		width: 20px;
		background-repeat: no-repeat;
		background-image: url(./images/close.png);
		background-size: 20px 20px;
		z-index: 700;
	}
</style>